<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<link rel='stylesheet prefetch' href='css/bootstrap.min.css'>
		<link rel='stylesheet prefetch' href='css/main.css'>
		<link rel='stylesheet prefetch' href='css/enterprise.css'>
		<link type="text/css" rel="stylesheet" media="all" href="css/s1.css" />
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="http://www.francescomalagrino.com/BootstrapPageGenerator/3/js/jquery-2.0.0.min.js"></script>
		<script type="text/javascript" src="http://www.francescomalagrino.com/BootstrapPageGenerator/3/js/jquery-ui"></script>
		<link href="http://www.francescomalagrino.com/BootstrapPageGenerator/3/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
		<script type="text/javascript" src="http://www.francescomalagrino.com/BootstrapPageGenerator/3/js/bootstrap.min.js"></script>
		<title></title>
		<script language="javascript">
	$(document).ready(function() {
		
						var url = "";
						var allpage=0;
						var page=1;
						var searchJson={"page":1};
						/**
						 *对用户的分页选择使用ajax进行局部刷新
						 *
						 */
					
						function chagebody(a) {
							var data = eval("(" + a + ")");
							$("#atbody1").empty();
							$.each(data,function(n, 实体类名) {
												if (n == 0) {
													allpage = 实体类名.pageCount;
													page = 实体类名.page;
												}
												var result = "";
												result+="<tr>";
												result+="<td>"+"<div class="special">"+
														"<img"+" src="+"'"+图片路径+"'"+" >"+"<a class="left" href="+服装详细页面路径+">"+"</a>"+
													"</div>"+"</td>";
												result+="<td>"+"<div class="special">"+
														"<img"+" src="+"'"+图片路径+"'"+" >"+"<a class="left" href="+服装详细页面路径+">"+"</a>"+
													"</div>"+"</td>";
												result+="<td>"+"<div class="special">"+
														"<img"+" src="+"'"+图片路径+"'"+" >"+"<a class="left" href="+服装详细页面路径+">"+"</a>"+
													"</div>"+"</td>";
												result+="<td>"+"<div class="special">"+
														"<img"+" src="+"'"+图片路径+"'"+" >"+"<a class="left" href="+服装详细页面路径+">"+"</a>"+
													"</div>"+"</td>";
												result+="<td>"+"<div class="special">"+
														"<img"+" src="+"'"+图片路径+"'"+" >"+"<a class="left" href="+服装详细页面路径+">"+"</a>"+
													"</div>"+"</td>";
												result += "</tr>";
												$("#atbody").append(result);
											});
						}
						


						function chagePage() {
							var result1 = "";
							result1 += "<h5 style='display:inline ;position:relative;top:19px' value='"+allpage+"' id='allPage'>共"
							+ allpage + "页</h5>";
							result1+="<ul>";
							if (allpage < 3) {
								result1+="<li><a style='color:block' class='paging' value='"+((page == 1) ? 1 : (page - 1))+"'>&laquo;</a></li>";
								for (var i = 0; i < allpage; i++) {
									if((i+1)==page){
										
										result1+="<li ><a style='background:#70DBF9;color:black' class='paging' value='"+(i + 1)+"'>"+(i + 1)+"</a></li>";
									}else{
										result1+="<li ><a style='color:black' class='paging' value='"+(i + 1)+"'>"+(i + 1)+"</a></li>";
									}
								}
								
							} else {
								if (page <= 1) {
									result1+="<li><a style='color:block' class='paging' value='1'>&laquo;</a></li>";
									result1+="<li ><a style='background:#70DBF9;color:black;' class='paging' value='1'>1</a></li>";
									result1+="<li ><a style='color:black;margin-left:3px' class='paging' value='2'>2</a></li>";
									result1+="<li ><a style='color:black;margin-left:3px' class='paging' value='3'>3</a></li>";
									page = 1;
								} else if (page >= allpage) {
									page = allpage;
									result1+="<li><a style='color:block' class='paging' value='"+(page-1)+"'>&laquo;</a></li>";
									result1+="<li ><a style='color:black' class='paging' value='"+(page - 2) +"'>"+(page - 2) +"</a></li>";
									result1+="<li ><a style='color:black' class='paging' value='"+(page - 1) +"'>"+(page - 1) +"</a></li>";
									result1+="<li ><a style='background:#70DBF9;color:black' class='paging' value='"+page+"'>"+page+"</a></li>";
									
									page = page - 1;
								} else {
									result1+="<li><a style='color:block' class='paging' value='"+(page-1)+"'>&laquo;</a></li>";
									result1+="<li ><a style='color:black' class='paging' value='"+(page - 1) +"'>"+(page - 1) +"</a></li>";
									result1+="<li ><a style='background:#70DBF9;color:black' class='paging' value='"+page+"'>"+page+"</a></li>";
									result1+="<li ><a style='color:black;margin-left:3px' class='paging' value='"+(page+1) +"'>"+(page+1) +"</a></li>";
								}
							}
							result1+="<li><a style='color:block' class='paging' value='"+(page+1)+"'>&raquo;</a></li>";
							result1+="</ul>";
							$("#page").empty();
							$("#page").append(result1);
						}
						$("#clickBrand").click(function(a){
							var data = eval("(" + a + ")");
							$("#atbody2").empty();
							$.each(data,function(n, 实体类名) {
												if (n == 0) {
													allpage = 实体类名.pageCount;
													page = 实体类名.page;
												}
												var result = "";
												result+="<tr>";
												result+="<td>"+"<div class="special">"+
														"<img"+" src="+"'"+图片路径+"'"+" >"+"<a class="left" href="+品牌详细页面路径+">"+"</a>"+
													"</div>"+"</td>";
												result+="<td>"+"<div class="special">"+
														"<img"+" src="+"'"+图片路径+"'"+" >"+"<a class="left" href="+品牌详细页面路径+">"+"</a>"+
													"</div>"+"</td>";
												result+="<td>"+"<div class="special">"+
														"<img"+" src="+"'"+图片路径+"'"+" >"+"<a class="left" href="+品牌详细页面路径+">"+"</a>"+
													"</div>"+"</td>";
												result+="<td>"+"<div class="special">"+
														"<img"+" src="+"'"+图片路径+"'"+" >"+"<a class="left" href="+品牌详细页面路径+">"+"</a>"+
													"</div>"+"</td>";
												result+="<td>"+"<div class="special">"+
														"<img"+" src="+"'"+图片路径+"'"+" >"+"<a class="left" href="+品牌详细页面路径+">"+"</a>"+
													"</div>"+"</td>";
												result += "</tr>";
												$("#atbody").append(result);
											});
						});
						//对分页的链接包括局部刷新后的链接绑定事件
						$("#page").delegate(".paging", "click", function() {
							searchJson.page=$(this).attr("value");
							$.post(url, searchJson, function(data, status) {
								chagebody(data);
								chagePage();
							});
						});
					})
	
</script>
	</head>

	<body>
		<!-- 顶部部分 -->
		<header>
			<!-- 上-->
			<div class="h_top">
				<!-- 右侧小导航-->
				<nav class="private">
					<ul>
						<li><a href="#">登录</a></li>
						<li class="separator">|</li>
						<li><a href="#">注册</a></li>
						<li class="separator">|</li>
						<li><a href="login.html">个人中心</a></li>
					</ul>
				</nav>
				<!-- .private -->
			</div>
			<!-- .h_top -->

			<!-- 下-->
			<div class="h_content">
				<div class="container">
					<!-- LOGO-->
					<div class="logo">
						<img src="image/logoText.png" width="35px" height="35px">
					</div>
					<!-- 搜索框-->
					<form class="search">
						<input type="text" name="search" class="entry_form" value="" placeholder="请在此搜索.." />
						<button type="button" class="btn btn-info btnsearch">Info</button>
					</form>
				</div>
			</div>
			<!-- .h_content -->

			<!-- 主体导航条开始 -->
			<div class="nav_primary">
				<div class="container">
					<nav class="primary">
						<ul>
							<li><a href="index.html">首页</a></li>
							<li><a href="catalog_grid.html">作品</a></li>
							<li><a href="catalog_grid.html">设计师</a></li>
							<li>
								<a href="catalog_grid.html">品牌服装</a>
								<ul class="sub">
									<li><a href="catalog_grid.html">For home</a></li>
									<li><a href="catalog_grid.html">For Garden</a></li>
									<li><a href="catalog_grid.html">For Car</a></li>
									<li><a href="catalog_grid.html">Other spray</a></li>
								</ul>
							</li>
							<li><a href="catalog_grid.html">服装企业</a></li>
							<li class="curent"><a href="catalog_grid.html">面料</a></li>
							<li><a href="catalog_grid.html">供应商</a></li>
							<li><a href="catalog_grid.html">资讯</a></li>
						</ul>
					</nav>
					<!-- .primary -->
				</div>
			</div>
			<!-- 主体导航条结束 -->
		</header>

		<!-- 内容部分 -->
		<div class="content">
			<div class="type">
				<span>分类：</span>
				<a>男装</a><a>女装</a><a>童装</a>
			</div>
			<h3 style="text-align: center;">企业名称</h3>
			<div class="top">
				<img class="ei" src="${企业图片路径}">
			</div>
			<div class="midcenter">
				<!--bootstrap-->
				<div class="container-fluid" style="padding: 0 !important;">
					<div class="row-fluid" style="height: 530px;overflow: hidden;">
						<div class="span9" id="span9left">
							<ul id="myTab" class="nav nav-tabs">
								<li class="active"><a href="#clothes" data-toggle="tab">
     								服装</a></li>
								<li><a href="#brand" data-toggle="tab" id="clickBrand">品牌</a></li>
							</ul>
							<div id="myTabContent" class="tab-content">
								<div class="tab-pane fade in active" id="clothes">
									<table>
										<tbody id="atbody1">
										<c:forEach var="" items="${ }" varStatus="status">

											<tr>
												<td>
													<div class="special">
														<img>
														<a class="left" href="${服装详细页面路径}">${服装名称}</a>
													</div>
												</td>
												<td>
													<div class="special">
														<img>
														<a class="left" href="${服装详细页面路径}">${服装名称}</a>
													</div>
													<td>
														<div class="special">
															<img>
															<a class="left" href="${服装详细页面路径}">${服装名称}</a>
														</div>
													</td>
													<td>
														<div class="special">
															<img>
															<a class="left" href="${服装详细页面路径}">${服装名称}</a>
														</div>
													</td>
													<td>
														<div class="special">
															<img>
															<a class="left" href="${服装详细页面路径}">${服装名称}</a>
														</div>
													</td>
											</tr>
											<tr>
												<td>
													<div class="special">
														<img>
														<a class="left">服装名称</a>
													</div>
												</td>
												<td>
													<div class="special">
														<img>
														<a class="left">服装名称</a>
													</div>
													<td>
														<div class="special">
															<img>
															<a class="left">服装名称</a>
														</div>
													</td>
													<td>
														<div class="special">
															<img>
															<a class="left">服装名称</a>
														</div>
													</td>
													<td>
														<div class="special">
															<img>
															<a class="left">服装名称</a>
														</div>
													</td>
											</tr>
										</c:forEach>
									</table>
								</div>
								<div class="tab-pane fade" id="brand">
									<table>
										<tbody id="atbody2">
										<c:forEach var="" items="${ }" varStatus="status">
											<tr>
												<td>
													<div class="special">
														<img src="品牌详细页面路径">
														<a class="left">品牌名称</a>
													</div>
												</td>
												<td>
													<div class="special">
														<img src="品牌详细页面路径">
														<a class="left">品牌名称</a>
													</div>
													<td>
														<div class="special">
															<img src="品牌详细页面路径">
															<a class="left">品牌名称</a>
														</div>
													</td>
													<td>
														<div class="special">
															<img src="品牌详细页面路径">
															<a class="left">品牌名称</a>
														</div>
													</td>
													<td>
														<div class="special">
															<img src="品牌详细页面路径">
															<a class="left">品牌名称</a>
														</div>
													</td>
											</tr>
										</c:forEach>
										</tbody>
									</table>
								</div>

							</div>
							<script>
								$(function() {
									$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
										// 获取已激活的标签页的名称
										var activeTab = $(e.target).text();
										// 获取前一个激活的标签页的名称
										var previousTab = $(e.relatedTarget).text();
										$(".active-tab span").html(activeTab);
										$(".previous-tab span").html(previousTab);
									});
								});
							</script>

						</div>
						<div id="right"  class="span3">
							<div class="right-top">
								<h5>企业简介</h5>
								<p></p>
							</div>
							<div class="right-middle">
								<h5>企业服装</h5><br />
								<a>男装</a><a>女装</a>
							</div>
							<div class="right-buttom">
								<table>
									<tr><td>地址:</td><td>${}</td></tr>
									<tr><td>电话:</td><td>${}</td></tr>
									<tr><td>传真:</td><td>${}</td></tr>
									<tr><td>电子邮箱:</td><td>${}</td></tr>
									<tr><td>联系人姓名:</td><td>${}</td></tr>
									<tr><td>联系人电话:</td><td>${}</td></tr>
									<tr><td>公司网址:</td><td>${}</td></tr>
								</table>
							</div>
						</div>
					</div>
				</div>
				<!--bootstrap结束-->
				<!--分页-->
				<div  id="page" style="width: 50%;margin: 0 auto;margin-bottom: 20px;">
					<span style="margin-left: 20px;" value="${pageCount }" id="allPage">共${pageCount }页</span>
						<ul style="display: inline;">
						  <li><a style="color:block" class="paging" value="1">&laquo;</a></li>
						<s:if test="pageCount==0">
						</s:if>
						<s:elseif test="pageCount==1">
							<li ><a style="background:#70DBF9;color:black;" class="paging" value="1">1</a></li>
						</s:elseif>
						<s:elseif test="pageCount==2">
							<li ><a style="background:#70DBF9;color:black" class="paging" value="1">1</a></li>
						  	<li><a class="paging" value="2">2</a></li>
						</s:elseif>
						<s:else>
							<li><a style="background:#70DBF9;color:black" class="paging" value="1">1</a></li>
						  	<li><a class="paging" value="2">2</a></li>
						  	<li><a class="paging" value="3">3</a></li>
						</s:else>
						
						<li><a style="color:block" class="paging" value="2">&raquo;</a></li>
						</ul>
					</div>
					<!--分页结束-->
			</div>
		</div>

		<!--底部-->
		<footer></footer>
	</body>

</html>